<template>
  <div>
    <NavBar activeComponent = 'strategy'/>
    <div class="travel-page">

      <!-- 头部筛选区域 -->
      <div class="filters-container">
        <div class="filter-row">
          <span class="filter-label">按分类</span>
          <div class="filter-options">
            <div
                v-for="(category) in displayedCategories"
                :key="category.tagId"
                :class="['filter-option', filters.category === category.tagName ? 'active' : '']"
                @click="filters.category = category.tagName; applyFilters()"
            >
              {{ category.tagName }}
            </div>

            <!-- 展开/收起按钮 -->
            <div
                v-if="categories.length > 10"
                class="filter-option toggle-button"
                @click="toggleCategoryView"
            >
              {{ showAllCategories ? '收起' : '展开' }}
            </div>
          </div>
        </div>
        <div class="filter-row">
          <span class="filter-label">按地区</span>
          <div class="filter-options">
            <div
                v-for="region in hotRegions"
                :key="region"
                :class="['filter-option', filters.region === region ? 'active' : '']"
                @click="filters.region = region; applyFilters()"
            >
              {{ region }}
            </div>

          </div>
        </div>

        <div class="filter-row">
          <span class="filter-label">按强度</span>
          <div class="filter-options">
            <div
                v-for="season in seasons"
                :key="season"
                :class="['filter-option', filters.season === season ? 'active' : '']"
                @click="filters.season = season; applyFilters()"
            >
              {{ season }}
            </div>
          </div>
        </div>
      </div>



      <!-- 主内容区域 -->
      <div class="content-container">
        <!-- 左侧热门攻略 -->
        <div class="hot-guides-section">
          <div class="section-header">
            <h3><i class="icon-fire"></i> 热门攻略</h3>
          </div>

          <div class="hot-guides-list">
            <div
                v-for="(guide, index) in hotGuides"
                :key="index"
                class="hot-guide-item"
                @click="viewGuideDetail(guide.id)"
            >
              <div :class="['rank-badge', index < 3 ? `top-${index+1}` : '']">{{ index + 1 }}</div>
              <div class="hot-guide-content">
                <div class="hot-guide-title">{{ guide.title }}</div>
                <div class="hot-guide-views">
                  <i class="icon-view"></i> {{ formatNumber(guide.viewCount) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧攻略列表 -->
        <div class="guides-section">
          <div class="section-header">
            <h2><i class="icon-guide"></i> 河北精选攻略</h2>
            <div class="sorting-options">
              <div
                  v-for="(label, key) in sortOptions"
                  :key="key"
                  :class="['sort-option', currentSort === key ? 'active' : '']"
                  @click="changeSort(key)"
              >
                {{ label }}
              </div>
            </div>
          </div>

          <div v-if="loading" class="loading-container">
            <div class="loading-spinner"></div>
            <p>数据加载中...</p>
          </div>

          <div v-else-if="guidesList.length === 0" class="empty-result">
            <div class="empty-icon">📭</div>
            <p>暂无符合条件的攻略</p>
          </div>

          <div v-else class="guides-grid">
            <div
                v-for="guide in guidesList"
                :key="guide.guideId"
                class="guide-card"
                @click="viewGuideDetail(guide.guideId)"
            >
              <div class="guide-image">
                <img :src="guide.coverImg" :alt="guide.title">
                <div class="guide-category">{{ guide.tags}}</div>
              </div>
              <div class="guide-content">
                <h3 class="guide-title">{{ guide.title }}</h3>
                <p class="guide-description">{{ guide.description }}</p>
                <div class="guide-meta">
                  <div class="guide-author">
                    <img :src="guide.user?.avatar" :alt="guide.user?.userName" class="author-avatar">
                    <span>{{ guide.user?.userName}}</span>
                  </div>
                  <div class="guide-date">{{ formatDate(guide.createTime) }}</div>
                </div>
                <div class="guide-stats">
                  <div class="stat-item"><i class="icon-view"></i> {{ formatNumber(guide.viewCount) }}</div>
                  <div class="stat-item"><i class="icon-like"></i> {{ formatNumber(guide.likeCount) }}</div>
                  <div class="stat-item"><i class="icon-comment"></i> {{ formatNumber(guide.commentCount) }}</div>

                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="pagination">
            <div
                v-for="page in totalPages"
                :key="page"
                :class="['page-item', currentPage === page ? 'active' : '']"
                @click="changePage(page)"
            >
              {{ page }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getAllGuide, getGuideById ,getTopGuide} from "@/api/guide.js";
import {getAllTravelogues,getTravelogueById ,getAllTags} from "@/api/travelogue.js";
export default {
  name: 'TravelGuides',

  data() {
    return {
      loading: true,
      showRegionSelector: false,

      // 筛选条件
      filters: {
        category: '全部',
        region: '全部',
        season: '全部'
      },

      // 选项数据
      categories: [{
        tagId:999,
        tagName:'全部'
      }],
      hotRegions:['全部','石家庄市','唐山市','秦皇岛市', '邯郸市','邢台市', '保定市','张家口市','承德市','沧州市','廊坊市','衡水市'],
      seasons: ['全部', '轻松', '中等强度', '高强度'],




      // 分页数据
      currentPage: 1,
      pageSize: 6,
      totalPages: 5,

      // 排序
      currentSort: 'newest',
      sortOptions: {
        newest: '最新发布',
        hottest: '最热门',
        mostViewed: '最多浏览',
        mostLiked: '最多点赞'
      },
      showAllCategories: false,
      // 攻略数据
      guidesList: [],
      hotGuides: []

    };
  },

  mounted() {
    this.fetchGuides();
    this.getAllGuides();
    this.getEditGuide();
    this.getTags();
  },
  computed: {
    displayedCategories() {
      return this.showAllCategories
          ? this.categories
          : this.categories.slice(0, 10);
    },
  },
  methods: {
    // 获取攻略数据
    fetchGuides() {
      this.loading = true;

      // 模拟API请求延迟
      setTimeout(() => {
        // 这里是模拟数据，实际项目中应该是API请求
        const mockGuides =this.guidesList2;

        // 应用筛选条件
        let filtered = mockGuides;
        if (this.filters.category !== '全部') {
          filtered = filtered.filter(guide=>(Array.isArray(guide.tags) && guide.tags.some(tag => tag.toLowerCase().includes(this.filters.category ))));
        }
        if (this.filters.region !== '全部') {
          console.log(`output-filters`,this.filters)
          filtered = filtered.filter(guide =>this.filters.region.includes(guide.city?.cityName));
        }
        if (this.filters.season !== '全部') {
          filtered = filtered.filter(guide => guide.travelIntensity.includes(this.filters.season));

        }

        // 应用排序
        // 应用排序
        switch (this.currentSort) {
          case 'newest':
            filtered.sort((a, b) => b.createTime - a.createTime); // 时间大的排前面
            break;
          case 'hottest':
            filtered.sort((a, b) => (b.viewCount + b.likeCount * 2) - (a.viewCount + a.likeCount * 2));
            break;
          case 'mostViewed':
            filtered.sort((a, b) => b.viewCount - a.viewCount); // 观看数多的排前面
            break;
          case 'mostLiked':
            filtered.sort((a, b) => b.likeCount - a.likeCount); // 点赞多的排前面
            break;
        }

        // 计算总页数
        const total = filtered.length;
        this.totalPages = Math.ceil(total / this.pageSize);

        // 分页
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.guidesList = filtered.slice(start, end);

        this.loading = false;
      }, 800);
    },

    // 筛选数据
    applyFilters() {
      this.currentPage = 1;
      this.fetchGuides();
    },

    // 选择区域
    selectRegion(region) {
      this.filters.region = region;
      this.applyFilters();
    },

    // 改变排序
    changeSort(sortKey) {
      this.currentSort = sortKey;
      this.fetchGuides();
    },

    // 切换页码
    changePage(page) {
      this.currentPage = page;
      this.fetchGuides();
    },

    // 查看攻略详情
    viewGuideDetail(id) {
      // 可以用路由导航或其它方式处理详情页跳转
      console.log(`查看攻略详情，ID: ${id}`);
      // this.$router.push(`/travelGuidePage`);
      this.$router.push({
        path: '/travelGuidePage',
        query: { id: id }
      });
    },

    // 格式化日期
    formatDate(input) {
      const date = typeof input === 'string' ? new Date(input) : input;
      if (isNaN(date)) return ''; // 避免非法日期

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    toggleCategoryView() {
      this.showAllCategories = !this.showAllCategories;
    },

    // 格式化数字 (千分位分隔)
    formatNumber(value) {
      if (value == null) return '0'; // 或者返回空字符串 ''
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    getAllGuides() {
      getAllGuide({ }).then((res) => {
        this.guidesList=res.data;
        this.guidesList2=res.data;
        console.log(`output->res`,res)
      });
    },
    getTags() {
      getAllTags().then((res) => {
        this.popularTags = res.data.sort((a, b) => b.hotness - a.hotness).slice(0, 10);
        this.categories.push(
            ...res.data.sort((a, b) => b.hotness - a.hotness)
        );

      })
    },
    getEditGuide() {
      getTopGuide(10).then((res) => {
        this. hotGuides  = res.data;

      });

    }
  }
};
</script>

<style scoped>
/* 全局样式 */
:root {
  --primary-color: #FF9C4A;  /* 暖橙色 */
  --primary-hover: #FF7E5F;  /* 亮橙色 */
  --secondary-color: #3EB489; /* 清新绿色 */
  --background-color: #F9F7F3; /* 淡米色背景 */
  --card-bg: #FFFFFF;  /* 白色卡片背景 */
  --light-gray: #F5F5F5; /* 浅灰色背景 */
  --border-color: #EEEEEE; /* 边框颜色 */
  --text-primary: #333333; /* 主要文字颜色 */
  --text-secondary: #666666; /* 次要文字颜色 */
  --text-light: #999999; /* 浅色文字 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); /* 小阴影 */
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1); /* 中阴影 */
  --radius-sm: 8px; /* 小圆角 */
  --radius-md: 12px; /* 中圆角 */
  --radius-lg: 16px; /* 大圆角 */
  --transition: all 0.3s ease; /* 过渡效果 */
}

.travel-page {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  padding: 20px;
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 100px);
}

/* 头部筛选区域 */
.filters-container {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 30px;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-label {
  width: 80px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-option {
  padding: 6px 16px;
  background-color: var(--light-gray);
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-option:hover {
  background-color: #FFE8D6;
}

.filter-option.active {
  background-color: #e0f7fa; /* 淡蓝色背景 */
  color: #00796b; /* 深绿色文字 */
  border: 1px solid #00796b; /* 添加边框以增强对比 */
  border-radius: 4px; /* 圆角边框 */
  padding: 4px 8px; /* 内边距 */
}


.region-selector {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  background-color: var(--light-gray);
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  gap: 5px;
}

.region-selector:hover {
  background-color: #FFE8D6;
}

.icon-dropdown {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 5px;
}

/* 区域选择弹窗 */
.region-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.region-selector-content {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  width: 700px;
  max-width: 90%;
  max-height: 80vh;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.region-selector-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.region-selector-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-light);
  cursor: pointer;
}

.region-selector-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

.province-item {
  margin-bottom: 20px;
}

.province-item:last-child {
  margin-bottom: 0;
}

.province-name {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 16px;
}

.cities-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.city-item {
  padding: 6px 16px;
  background-color: var(--light-gray);
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.city-item:hover {
  background-color: #FFE8D6;
  color: var(--primary-color);
}

/* 主内容区域 */
.content-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
}

/* 热门攻略区域 */
.hot-guides-section {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: fit-content;
}

.section-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-header h3, .section-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}

.icon-fire, .icon-guide {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-fire {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF9C4A'%3E%3Cpath d='M12 23c6.075 0 11-4.925 11-11 0-7.88-5.5-10-5.5-10S16 4.89 16 7c0 1.188.5 2-1 3.5C13.376 7.17 13 5.5 13 5.5S9 6.93 9 10.5c0-2.5-4-2.5-4-6C3.5 3.5 5 0 5 0S0 2.12 0 12c0 6.075 5.925 11 12 11z'/%3E%3C/svg%3E");
}

.icon-guide {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233EB489'%3E%3Cpath d='M12 2C7.589 2 4 5.589 4 10c0 5.5 7 12 8 12s8-6.5 8-12c0-4.411-3.589-8-8-8zm0 12c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'/%3E%3C/svg%3E");
}

.hot-guides-list {
  padding: 10px 0;
}

.hot-guide-item {
  display: flex;
  padding: 12px 20px;
  cursor: pointer;
  transition: var(--transition);
  align-items: center;
}

.hot-guide-item:hover {
  background-color: var(--light-gray);
}

.rank-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E0E0E0;
  color: #666;
  border-radius: 5px;
  margin-right: 12px;
  font-weight: 600;
  font-size: 14px;
}

.rank-badge.top-1 {
  background-color: #FF6B6B;
  color: white;
}

.rank-badge.top-2 {
  background-color: #FF9E6B;
  color: white;
}

.rank-badge.top-3 {
  background-color: #FFCE6B;
  color: white;
}

.hot-guide-content {
  flex: 1;
}

.hot-guide-title {
  font-size: 14px;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.hot-guide-views {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-view, .icon-like, .icon-comment {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-view {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.icon-like {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.icon-comment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* 精选攻略区域 */
.guides-section {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding-bottom: 20px;
}

.sorting-options {
  display: flex;
  gap: 15px;
}

.sort-option {
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.sort-option:hover {
  color: var(--primary-color);
}

.sort-option.active {
  color: var(--primary-color);
  font-weight: 500;
  position: relative;
}

.sort-option.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
}

.loading-container {
  text-align: center;
  padding: 40px 0;
}

.loading-spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 156, 74, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s infinite linear;
  margin-bottom: 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-container p {
  color: var(--text-secondary);
  font-size: 14px;
}

.empty-result {
  text-align: center;
  padding: 40px 0;
}

.empty-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

.empty-result p {
  color: var(--text-secondary);
  font-size: 16px;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  padding: 20px;
}

.guide-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.guide-image {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.guide-card:hover .guide-image img {
  transform: scale(1.05);
}

.guide-category {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--secondary-color);
  color: white;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
}

.guide-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.guide-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 44px;
}

.guide-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.guide-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-light);
}

.guide-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.guide-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-light);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.page-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--light-gray);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
}

.page-item:hover {
  background-color: #FFE8D6;
}

.page-item.active {
  background-color: var(--primary-color);
  color: white;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
  }

  .hot-guides-section {
    display: none;
  }
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-label {
    margin-bottom: 5px;
  }

  .guides-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .filter-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .filter-option {
    white-space: nowrap;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .sorting-options {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
  }
  .toggle-button {
    color: #409eff;
    background-color: #e8f4ff; /* 淡蓝背景 */
    border: 1px solid #409eff;
    font-weight: bold;
    border-radius: 12px;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
  }

  .toggle-button:hover {
    background-color: #d0eaff; /* hover 时更深一点 */
  }
}
</style>